<template>
  <div>
    <div class="XboxTop">
      <div class="XboxTop_title">实时数据</div>
    </div>
    <div class="XboxTop_con" style="padding: 1rem">
      <div style="width: 100%;height: 9rem;">
        <div class="btwz">当前航标总数</div>
        <div style="display: flex;justify-content: space-between;">
          <div style="width: 48%;">
            <div style="width:100%;display: flex;justify-content: space-between;">
              <div v-for="(item, i) in FlowVal" :key="i" class="numBj">
                <ScrollNumber :val="item" fontSize="4rem" style="color: #fff;width: 100%;"></ScrollNumber>
              </div>
            </div>
          </div>
          <div style="width: 48%;display: flex;flex-direction: column;justify-content: space-between;">
            <div
              style="width: 100%;height: calc(100% / 2 - 0.2rem);background: rgba(32, 119, 249, 0.15);display: flex;justify-content: space-between;align-items: center; padding: 0.5em 1rem;">
              <div style="display: flex;align-items: center;">
                <img src="@/assets/hb_img/bj/zchb.png" alt="" style="height: 100%;margin-right: 1rem;">
                <div style="font-size: 1rem;">正常航标总数</div>
              </div>
              <div style="font-size: 1.5rem;color:#80F2FF ;">123</div>
            </div>
            <div
              style="width: 100%;height: calc(100% / 2 - 0.2rem);background: rgba(32, 119, 249, 0.15);display: flex;justify-content: space-between;align-items: center; padding: 0.5em 1rem;">
              <div style="display: flex;align-items: center;">
                <img src="@/assets/hb_img/bj/ychb.png" alt="" style="height: 100%;margin-right: 1rem;">
                <div style="font-size: 1rem;">异常航标总数</div>
              </div>
              <div style="font-size: 1.5rem;color: #F56C6C;">123</div>
            </div>
          </div>
        </div>
      </div>
      <div style="width: 100%;height: calc(100% - 9rem);">
        <div class="btwz">航标养护正常率</div>
        <div style="width: 100%;height: calc(100% - 3rem);display: flex;">
          <div style="width: 30%;" ref="ech"></div>
          <div style="width: 70%;">
            <el-table :data="tableData" style="width: 100%;height: 100%;" height="100%" stripe class="tabLeM">
              <el-table-column prop="date" label="管理单位">
              </el-table-column>
              <el-table-column prop="name" label="在线航标个数">
              </el-table-column>
              <el-table-column prop="address" label="离线航标个数">
              </el-table-column>
              <el-table-column prop="address" label="报警航标个数">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import ScrollNumber from "@/components/homeMode/scrollNumber.vue";
import * as echarts from "echarts";
import 'echarts-liquidfill';
export default {
  components: { ScrollNumber },
  //变量
  data() {
    return {
      FlowVal: [0, 0, 0, 0,],
      Echarts: null,
      tableData: [{ date: "123", name: "123", address: "123" }, { date: "123", name: "123", address: "123" }, { date: "123", name: "123", address: "123" }, { date: "123", name: "123", address: "123" },]
    }
  },
  //初始
  mounted() {
    let echartsL = echarts;
    this.$nextTick(() => {
      let echarts = echartsL.init(this.$refs.ech, "macarons");
      this.Echarts = echarts;
      this.getEach()
      window.addEventListener("resize", () => {
        //重置容器高宽
        echarts.resize();
      });
    });
  },
  //事件
  methods: {
    getEach() {
      var option = {
        title: [{
          text: '314人',
          x: 'center',
          y: '58%',
          textStyle: {
            fontSize: 34,
            color: '#fff',
          },
        }
        ],
        series: [{
          type: 'liquidFill',
          radius: '100%',
          center: ['50%', '50%'],
          color: [
            {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#1EE7E7',
                },
                {
                  offset: 1,
                  color: '#1890FF',
                },
              ],
              globalCoord: false,
            },
          ],
          data: [0.3, 0.3], // data个数代表波浪数
          backgroundStyle: {
            borderWidth: 1,
            color: 'rgba(117, 205, 255, 0.25)',
          },
          label: {
            normal: {
              show: false,
              textStyle: {
                fontSize: 64,
                fontWeight: 'bold',
                color: '#000',
              },
            },
          },
          outline: {
            borderDistance: 0,
            itemStyle: {
              borderWidth: 4,
              borderColor: 'transparent',
            },
          },
        }],
      };
      console.log(this.Echarts, 'this.Echarts');

      this.Echarts.setOption(option);
      setTimeout(() => {
        this.Echarts.resize();
      }, 100);
    }
  },
  //销毁
  beforeDestroy() { }
}
</script>
<style scoped>
.btwz {
  font-size: 1rem;
  margin-bottom: 1rem;
}

.numBj {
  width: calc(100% / 4 - 10px);
  /* height: 10rem; */
  padding: 16px;
  background: url("~@/assets/hb_img/bj/img_number@2x.png") no-repeat !important;
  background-size: 100% 100% !important;
}

::v-deep .count-flop-box {
  width: 100% !important;
  height: 100% !important
}

.tabLeM {
  background-color: transparent;
  color: #fff !important;
}

.tabLeM ::v-deep tr {
  background-color: transparent !important;
}

.tabLeM ::v-deep .el-table__header-wrapper th {
  color: #fff !important;
  background-color: rgba(32, 112, 249, 0.25) !important;
  font-size: 0.8rem !important;
}

.tabLeM ::v-deep .el-table__row--striped {
  background-color: rgba(32, 112, 249, 0.25) !important;
}

.tabLeM ::v-deep .el-table__cell {
  background-color: transparent !important;
  font-size: 0.8rem !important;
}

.tabLeM ::v-deep .cell {
  line-height: normal !important;
}
</style>